<template>
  <div v-loading="loading" element-loading-text="模型生成中...">
    <div style="width: 300px; border: 1px solid white;">
      <el-form  ref="form" label-width="90px">
        <div class="selectItem">
          <div class="color-bar" style="background-color: rgb(192, 20, 255);"></div>
          <div class="selectTitle" >
            <el-radio v-model="radio" label="2">选择曲面</el-radio>
          </div>
          <div class="selectedItem" v-if="curvedSurface" >
            <span>{{ curvedSurface.name}}</span>
            <span @click="removeCurvedSurface()">×</span>
          </div>
        </div>
        <div class="selectItem">
          <div class="color-bar" style="background-color: rgb(192, 20, 255);"></div>
          <div class="selectTitle" >
            <el-radio v-model="radio" label="1">选择桁条</el-radio>
          </div>
          <div class="selectedItem"  v-for="(item, index) in positionLines" :key="index">
            <span>{{item.name}}</span>
            <span @click="removePositionLine(index)">×</span>
          </div>
        </div>
        <div class="selectItem">
          <div class="color-bar" style="background-color: rgb(192, 20, 255);"></div>
          <div class="selectTitle" >
            <el-radio v-model="radio" label="3">选择缘条</el-radio>
          </div>
          <div class="selectedItem"  v-for="(item, index) in positionLines1" :key="index">
            <span>{{item.name}}</span>
            <span @click="removePositionLine1(index)">×</span>
          </div>
        </div>
        <el-form-item label="肋厚">
          <el-input size="small" v-model.number="ribThickness" type="number" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>

        <el-form-item label="缘条槽长宽">
          <el-input size="small" style="width: 48%"  type="number" v-model.number="slotLength" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
          <el-input size="small"  style="width: 48%; margin-left: 4%"  type="number" v-model.number="slotWidth" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>
        <el-form-item label="桁条槽长宽" >
          <el-input size="small" style="width: 41.7%"  type="number" v-model.number="stringerLength" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
          <el-input size="small"  style="width: 41.7%; margin-left: 4%"  type="number" v-model.number="stringerWidth" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
<!--          <div  style="width: 10%;margin-left: 2%;line-height: 1;cursor: pointer" @click="addStringer"><i class="el-icon-circle-plus" style="color: #409eff;font-size: 20px"></i></div>-->
        </el-form-item>


        <el-form-item label="腹板厚度">
          <el-input size="small"  type="number" v-model.number="webThickness2" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>
        <el-form-item label="底缘厚度">
          <el-input size="small"  type="number" v-model.number="webThickness1" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>
        <el-form-item label="孔高">
          <el-input size="small"  type="number" v-model.number="holeHeight" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>
        <el-form-item label="孔厚">
          <el-input size="small"  type="number" v-model.number="holeThickness" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>



        <el-form-item  label="孔相对位置" >
          <el-input style="width: 48%" size="small"  type="number" v-model.number="holeH1" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
          <el-input style="width: 48%; margin-left: 4%" size="small"  type="number" v-model.number="holeV1" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>

        <el-form-item label="孔半径">
          <el-input size="small"  type="number" v-model.number="holeR1" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox v-model="checkedHole2">孔2</el-checkbox>
        </el-form-item>
        <el-form-item v-if="checkedHole2" label="孔2相对位置">
          <el-input  size="small" style="width: 48%"  type="number" v-model.number="holeH2" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
          <el-input size="small" style="width: 48%; margin-left: 4%" type="number" v-model.number="holeV2" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>
        <el-form-item v-if="checkedHole2" label="孔2半径">
          <el-input size="small"  type="number" v-model.number="holeR2" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>

        <el-form-item label="" v-if="checkedHole2">
          <el-checkbox v-model="checkedHole3">孔3</el-checkbox>
        </el-form-item>
        <el-form-item v-if="checkedHole3 && checkedHole2" label="孔3相对位置">
          <el-input  size="small" style="width: 48%"  type="number" v-model.number="holeH3" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
          <el-input size="small" style="width: 48%; margin-left: 4%" type="number" v-model.number="holeV3" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>
        <el-form-item v-if="checkedHole3  && checkedHole2" label="孔3半径">
          <el-input size="small"  type="number" v-model.number="holeR3" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>

        <el-form-item label="" v-if="checkedHole3 && checkedHole2">
          <el-checkbox v-model="checkedHole4 ">孔4</el-checkbox>
        </el-form-item>
        <el-form-item v-if="checkedHole4 && checkedHole3 && checkedHole2" label="孔4相对位置">
          <el-input  size="small" style="width: 48%"  type="number" v-model.number="holeH4" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
          <el-input size="small" style="width: 48%; margin-left: 4%" type="number" v-model.number="holeV4" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>
        <el-form-item v-if="checkedHole4 && checkedHole3 && checkedHole2" label="孔4半径">
          <el-input size="small"  type="number" v-model.number="holeR4" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>

        <el-form-item label=""  v-if="checkedHole4 && checkedHole3 && checkedHole2">
          <el-checkbox v-model="checkedHole5">孔5</el-checkbox>
        </el-form-item>
        <el-form-item v-if="checkedHole5 && checkedHole4 && checkedHole3 && checkedHole2" label="孔5相对位置">
          <el-input  size="small" style="width: 48%"  type="number" v-model.number="holeH5" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
          <el-input size="small" style="width: 48%; margin-left: 4%" type="number" v-model.number="holeV5" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>
        <el-form-item v-if="checkedHole5 && checkedHole4 && checkedHole3 && checkedHole2" label="孔5半径">
          <el-input size="small"  type="number" v-model.number="holeR5" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>

        <el-form-item label="" v-if="checkedHole5 && checkedHole4 && checkedHole3 && checkedHole2">
          <el-checkbox v-model="checkedHole6">孔6</el-checkbox>
        </el-form-item>
        <el-form-item v-if="checkedHole6 && checkedHole5 && checkedHole4 && checkedHole3 && checkedHole2" label="孔5相对位置">
          <el-input  size="small" style="width: 48%"  type="number" v-model.number="holeH6" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
          <el-input size="small" style="width: 48%; margin-left: 4%" type="number" v-model.number="holeV6" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>
        <el-form-item v-if="checkedHole6 && checkedHole5 && checkedHole4 && checkedHole3 && checkedHole2" label="孔5半径">
          <el-input size="small"  type="number" v-model.number="holeR6" placeholder="请输入内容">
            <i slot="suffix" style="font-style:normal; color: #606266;margin-right: 5px">mm</i>
          </el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center; margin-top: 10px">
        <el-button type="primary" size="small" @click="creatWingRib">确定</el-button>
        <el-button size="small" @click="closeDialog">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Axis,
    CrownCADPlugin,
    Direction, PluginCADToolFunctionType,
    PluginFunctionType,
    Point
  } from "../../../../nodeApp/static/lib/crowncad-plugin-sdk-0.0.1";
  export default {
    name: "WingRib",
    data() {
      return {
        loading: false,
        minHeight: 545,
        curvedSurface: null,
        surfaceLines: [],
        positionLines:[],
        positionLines1:[],
        ribThickness:2,
        slotLength: 1,
        slotWidth: 1,
        stringerLength:3,
        stringerWidth:3,
        basicId:[],

        webThickness1:0.2,
        webThickness2:0.1,

        radio: '2',
        shellFaces:[],
        firstPoint: null,
        secondPoint:null,
        holeHeight: 1,
        holeH1: 15,
        holeV1: 0,
        holeR1: 4.1,
        holeThickness: 0.2,
        checkedHole2:false,
        holeH2: -20,
        holeV2: 0,
        holeR2: 3.8,
        checkedHole3:false,
        holeH3: -60,
        holeV3: 0,
        holeR3: 2,
        checkedHole4:false,
        holeH4: -15,
        holeV4: 5,
        holeR4: 3.8,
        checkedHole5:false,
        holeH5: -15,
        holeV5: 5,
        holeR5: 3.8,
        checkedHole6:false,
        holeH6: -15,
        holeV6: 5,
        holeR6: 3.8,

        stringers:[],
        stringer2: false,
        stringerLength2:5,
        stringerWidth2:5,
        stringers2:[],
      }
    },
    async mounted() {
      //创建插件对象
      this.crownCADPlugin = new CrownCADPlugin();
      //设置CrownCAD平台地址
      this.crownCADPlugin.setParentOrigin(window.url);
      //.设置与CrownCAD平台尝试建立连接的次数
      this.crownCADPlugin.setMaxAttempt(5);
      //设置插件在CrownCAD平台显示的尺寸
      this.crownCADPlugin.setLayout(320, 320, this.minHeight);
      //.发送与CrownCAD平台建立连接的请求
// 发送与CrownCAD平台建立连接的请求
      await this.crownCADPlugin.connect()
      await this.crownCADPlugin.request.execFunction(PluginFunctionType.LAYOUT, { minWidth: 320, width: 320, maxHeight: this.minHeight})

      // 选择元素监听函数
      this.subscribeElementPick()
      this.crownCADPlugin.command.clearCommand();

    },
    methods: {
      closeDialog() {
        this.crownCADPlugin.request.execFunction(PluginCADToolFunctionType.CLOSEACTIVECMD, null);
      },
      subscribeElementPick () {

        this.crownCADPlugin.event.subscribeElementPickEvent(res => {
          // this.crownCADPlugin.request.subscribeEvent(PluginEventType.ELEMENTPICK, res => {

          if(res.element.length) {

            // 选择桁条
            if(this.radio==='1') {
              if(!this.positionLines.length) {
                this.positionLines.push(res.element[0].element)
                this.addHeight(28) // 高度增加
              } else if(this.positionLines[this.positionLines.length- 1].id!==res.element[0].element.id) {
                this.positionLines.push(res.element[0].element)
                this.addHeight(28)
              }

              // 选择曲面
            } else if(this.radio==='2') {
              if(!this.curvedSurface) {
                this.curvedSurface= res.element[0].element
                this.addHeight(28)
              }
              // 选择缘条
            } else  if(this.radio==='3') {
              if(!this.positionLines1.length) {
                this.positionLines1.push(res.element[0].element)
                this.addHeight(28)
              } else if(this.positionLines1[this.positionLines1.length- 1].id!==res.element[0].element.id) {
                this.positionLines1.push(res.element[0].element)
                this.addHeight(28)
              }

            }


          }
        })
      },
      // 增加对话框高度
      async addHeight(y) {
        this.minHeight= this.minHeight + y
        await this.crownCADPlugin.request.execFunction(PluginFunctionType.LAYOUT, { minWidth: 350, width: 350, maxHeight: this.minHeight})
      },

      // 减少对话框高度
      async minusHeight(y) {
        this.minHeight= this.minHeight - y
        await this.crownCADPlugin.request.execFunction(PluginFunctionType.LAYOUT, { minWidth: 350, width: 350, maxHeight: this.minHeight})
      },

      async creatWingRib() {


        // 重置选择元素的类型
        this.radio= '0'

        // 对选择的曲面进行加厚
        this.crownCADPlugin.command.clearCommand();
        await this.crownCADPlugin.command.solid.thickenIncrement({
          thickenSurfaceId: this.curvedSurface.id, thickness: this.ribThickness, outward: 0, },"加厚1")
        await this.crownCADPlugin.command.execute();
        this.crownCADPlugin.command.clearCommand();
        //缘条、桁条前置基准面绘制槽口的草图
        this.crownCADPlugin.command.sketch.createSketch({sketchName: '草图6', datumId: 8});
        for (let i = 0; i < this.positionLines1.length; i++) {
          let item= this.positionLines1[i]
          this.crownCADPlugin.command.sketch.createRectangleByCenter({
            centerPoint: new Point(+item.params.startPoint[0].toFixed(3),+item.params.startPoint[1].toFixed(3),0), endPoint: new Point(+item.params.startPoint[0].toFixed(3)+ this.slotWidth*0.5,+item.params.startPoint[1].toFixed(3)+ this.slotLength*0.5,0)
          })
        }

        for (let i = 0; i < this.positionLines.length; i++) {
          let item= this.positionLines[i]
          this.crownCADPlugin.command.sketch.createRectangleByCenter({
            centerPoint: new Point(+item.params.startPoint[0].toFixed(3),+item.params.startPoint[1].toFixed(3),0), endPoint: new Point(+item.params.startPoint[0].toFixed(3)+ this.stringerWidth*0.5,+item.params.startPoint[1].toFixed(3)+ this.stringerLength*0.5,0)
          })

        }

        //退出草图
        this.crownCADPlugin.command.sketch.exitSketch();
        await this.crownCADPlugin.command.execute();
        this.crownCADPlugin.command.clearCommand();

        //对加厚的曲面，通过草图6绘制的槽的草图进行切除
        let res = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["草图6"]);
        let ferRes = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["加厚1"]);

        await this.crownCADPlugin.command.solid.extrudeCutIncrement({
          sketch: res.data.entities[0]?.id,
          extrudeType:5,
          cutSolids: [ferRes.data.entities[0]?.id]
        }, "切除槽");
        await this.crownCADPlugin.command.execute();
        this.crownCADPlugin.command.clearCommand();
        //根据桁条的曲面构建基准面进行，选择曲面加厚的面的分割基准面：梁基准面、梁基准面1
        let pres = await this.crownCADPlugin.query.getElementsByFeatureNames(['拉伸曲面3']);
        let pres1 = await this.crownCADPlugin.query.getElementsByFeatureNames(['拉伸曲面4']);

        this.basicId.push(await this.createBasicPlane(pres.data.elements[0].id,0,'梁基准面',0))
        this.basicId.push(await this.createBasicPlane(pres1.data.elements[0].id,0,'梁基准面1',0))
        //根据梁基准面、梁基准面1对加厚1曲面进行分割
        let fres = await this.crownCADPlugin.query.getEntitiesByFeatureNames(['切除槽']);
        await this.createCutSplit(fres.data.entities[0].id, this.basicId[0],'分割0')
        let ffres = await this.crownCADPlugin.query.getEntitiesByFeatureNames(['分割0']);
        let res1 = await this.crownCADPlugin.query.getElementsByEntityId(ffres.data.entities[0].id);
        let tempFaceId= 0
        let multiFaces= []
        console.log(res1);
        res1.data.elements.forEach(el=>{
          if(el.type===19&& Math.round(el.params.normal[0])=== 0&& Math.round(el.params.normal[1])=== 0&& Math.round(el.params.normal[2]) ===1) {

            tempFaceId= el.id
          } else if(el.type===19&& Math.round(el.params.normal[0])=== 0&& Math.round(el.params.normal[1])=== 0&& Math.round(el.params.normal[2]) ===-1) {
            multiFaces.push(el.id)
          }

        })

        await this.createShellNew([tempFaceId],multiFaces,'抽壳0')

        // await this.createShell1([tempFaceId],'抽壳0' )

        //return
        //根据梁基准面1对加厚1曲面进行二次分割
        await this.createCutSplit(ffres.data.entities[1].id, this.basicId[1],'分割1')

        let ffres1 = await this.crownCADPlugin.query.getEntitiesByFeatureNames(['分割1']);

        let res2 = await this.crownCADPlugin.query.getElementsByEntityId(ffres1.data.entities[0].id);
        let tempFaceId1= 0
        let multiFaces1= []
        res2.data.elements.forEach(el=>{
          if(el.type===19&& Math.round(el.params.normal[0])=== 0&& Math.round(el.params.normal[1])=== 0&& Math.round(el.params.normal[2]) ===1) {

            tempFaceId1= el.id
          } else if(el.type===19&& Math.round(el.params.normal[0])=== 0&& Math.round(el.params.normal[1])=== 0&& Math.round(el.params.normal[2]) ===-1) {
            multiFaces1.push(el.id)
          }

        })
        await this.createShellNew([tempFaceId1],multiFaces1,'抽壳1')

        let res3 = await this.crownCADPlugin.query.getElementsByEntityId(ffres1.data.entities[1].id);
        let tempFaceId2= 0
        let multiFaces2= []
        res3.data.elements.forEach(el=>{
          if(el.type===19&& Math.round(el.params.normal[0])=== 0&& Math.round(el.params.normal[1])=== 0&& Math.round(el.params.normal[2]) ===1) {

            tempFaceId2= el.id
          } else if(el.type===19&& Math.round(el.params.normal[0])=== 0&& Math.round(el.params.normal[1])=== 0&& Math.round(el.params.normal[2]) ===-1) {
            multiFaces2.push(el.id)
          }

        })

        await this.createShellNew([tempFaceId2],multiFaces2,'抽壳2')


        // 进行打孔操作
        await this.createCircleHole()

        return



        // 备份老版本
        await this.convertEdge()

        await this.trimCurveLine()

        await this.createExtrude()

        await this.createShell()



        await this.createCircleHole()


        await this.createSlot()

        await this.createStringerSlot(this.stringerLength, this.stringerWidth, "草图6", 0)
        for (let i = 0; i < this.stringers.length; i++) {
          await this.createStringerSlot(this.stringers[i].stringerLength, this.stringers[i].stringerWidth, "草图" + (i+7),i+1)
        }

        if(this.stringer2) {
          await this.createStringerSlot2(this.stringerLength2, this.stringerWidth2, "草图" + (this.stringers.length+7), this.stringers.length+1)

          for (let i = 0; i < this.stringers2.length; i++) {
            await this.createStringerSlot2(this.stringers2[i].stringerLength, this.stringers2[i].stringerWidth, "草图" + (i+this.stringers.length+8),i+this.stringers.length+2)
          }
        }





      },

      async createBasicPlane(faceId, len, name,reverse) {
        this.crownCADPlugin.command.clearCommand();
        await this.crownCADPlugin.command.datum.createPlaneByDistanceIncrement({
          faceId: faceId,
          invertNormal: 0, paralDis: Math.abs(len), reverse: reverse
        },name);

        await this.crownCADPlugin.command.execute();
        return await this.getEntityId(name);
      },


      async createCutSplit(solidId,cutSurfaceId,name) {
        this.crownCADPlugin.command.clearCommand();
        await this.crownCADPlugin.command.solid.cutSplitIncrement({
          solidId, cutSurfaceId, },name)

        await this.crownCADPlugin.command.execute();
      },

      async getEntityId(name) {
        this.crownCADPlugin.command.clearCommand();
        // 获取草图1的featuresid
        let res= await this.crownCADPlugin.query.getFeaturesByNames([name])
        // let res= await this.crownCADPlugin.request.execFunction(PluginFunctionType.GETFEATURESBYNAMES, {featureNames: [name]})
        // 获取草图1的entityid
        let res1= await this.crownCADPlugin.query.getEntitiesByFeatureIds([res.data.features[0]?.id])
        // let res1= await this.crownCADPlugin.request.execFunction(PluginFunctionType.GETENTITIESBYFEATUREIDS, {featureIds: [res.features[0]?.id]})
        // 拉伸草图1的圆


        return res1.data.entities[0].id
      },

      async createShellNew(removeFaces,multiFaces,name) {
        this.crownCADPlugin.command.clearCommand();
        await this.crownCADPlugin.command.solid.createShellIncrement({
          removeFaces,
          thickness: this.webThickness1,
          multiFaces:multiFaces,
          multiThickness:[this.webThickness2 ],
          outward: 0},name)
        await this.crownCADPlugin.command.execute();

      },

      async createShell1(removeFaces,name) {
        this.crownCADPlugin.command.clearCommand();
        await this.crownCADPlugin.command.solid.createShellIncrement({
          removeFaces,
          thickness:  this.webThickness1,
          outward: 0},name)
        await this.crownCADPlugin.command.execute();

      },

      async createCircleHole() {

        //创建打孔圆的草图
        this.crownCADPlugin.command.clearCommand();
        this.crownCADPlugin.command.sketch.createSketch({sketchName: '草图13', datumId: 8});
        //创建6个圆的坐标
        let x1, x2, x3, x4, x5, x6, y1, y2, y3, y4, y5, y6
        x1= this.holeH1
        y1= this.holeV1


        if(this.checkedHole2) {
          x2= this.holeH2
          y2= this.holeV2
        }

        if(this.checkedHole3) {
          x3= this.holeH3
          y3= this.holeV3
        }

        if(this.checkedHole4) {
          x4= this.holeH4
          y4= this.holeV4
        }

        if(this.checkedHole5) {
          x5= this.holeH5
          y5= this.holeV5
        }
        if(this.checkedHole6) {
          x6= this.holeH6
          y6= this.holeV6
        }

        //根据选择条件绘制六个圆草图
        this.crownCADPlugin.command.sketch.createCircle({
          centerPoint: new Point(x1,y1,0),
          circlePoint: new Point(x1 + this.holeR1,y1,0),
        })

        if(this.checkedHole2) {
          this.crownCADPlugin.command.sketch.createCircle({
            centerPoint: new Point(x2,y2,0),
            circlePoint: new Point(x2 + this.holeR2,y2,0),
          })
        }

        if(this.checkedHole2 && this.checkedHole3) {
          this.crownCADPlugin.command.sketch.createCircle({
            centerPoint: new Point(x3,y3,0),
            circlePoint: new Point(x3 + this.holeR3,y3,0),
          })
        }


        if(this.checkedHole4 && this.checkedHole2 && this.checkedHole3) {
          this.crownCADPlugin.command.sketch.createCircle({
            centerPoint: new Point(x4,y4,0),
            circlePoint: new Point(x4 + this.holeR4,y4,0),
          })
        }


        if(this.checkedHole5 && this.checkedHole4 && this.checkedHole2 && this.checkedHole3) {
          this.crownCADPlugin.command.sketch.createCircle({
            centerPoint: new Point(x5,y5,0),
            circlePoint: new Point(x5 + this.holeR5,y5,0),
          })
        }

        if(this.checkedHole6 && this.checkedHole5 && this.checkedHole4 && this.checkedHole2 && this.checkedHole3) {
          this.crownCADPlugin.command.sketch.createCircle({
            centerPoint: new Point(x6,y6,0),
            circlePoint: new Point(x6 + this.holeR6,y6,0),
          })
        }


        //退出草图
        this.crownCADPlugin.command.sketch.exitSketch();
        await this.crownCADPlugin.command.execute();

        this.crownCADPlugin.command.clearCommand();
        //放样曲面需要绘图的基准面
        this.crownCADPlugin.command.datum.createPlaneByDistance({
          planeId: 8,
          invertNormal: 0, paralDis: this.holeHeight, reverse:0
        },'孔基准面');
        await this.crownCADPlugin.command.execute();
        this.crownCADPlugin.command.clearCommand();
        let res = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["草图13"]);
        let ferRes = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["抽壳0"]);
        let ferRes1 = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["抽壳1"]);
        let ferRes2 = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["抽壳2"]);
        //绘制的圆可能不在一个实体上，所以三个拉伸切除都切割一下
        await this.crownCADPlugin.command.solid.extrudeCutIncrement({
          sketch: res.data.entities[0]?.id,
          extrudeType:5,
          cutSolids: [ferRes.data.entities[0]?.id]
        }, "拉伸切除");
        await this.crownCADPlugin.command.execute();
        this.crownCADPlugin.command.clearCommand();
        await this.crownCADPlugin.command.solid.extrudeCutIncrement({
          sketch: res.data.entities[0]?.id,
          extrudeType:5,
          cutSolids: [ferRes1.data.entities[0]?.id]
        }, "拉伸切除1");
        await this.crownCADPlugin.command.execute();
        this.crownCADPlugin.command.clearCommand();
        await this.crownCADPlugin.command.solid.extrudeCutIncrement({
          sketch: res.data.entities[0]?.id,
          extrudeType:5,
          cutSolids: [ferRes2.data.entities[0]?.id]
        }, "拉伸切除2");
        await this.crownCADPlugin.command.execute();


        this.crownCADPlugin.command.clearCommand();

        let res1 = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["孔基准面"]);
        this.crownCADPlugin.command.clearCommand();
        //绘制放样的草图
        this.crownCADPlugin.command.sketch.createSketch({sketchName: '草图14', datumId: res1.data.entities[0].id});

        this.crownCADPlugin.command.sketch.createCircle({
          centerPoint: new Point(x1,y1,0),
          circlePoint: new Point(x1 + this.holeR1-0.1,y1,0),
        })

        if(this.checkedHole2) {
          this.crownCADPlugin.command.sketch.createCircle({
            centerPoint: new Point(x2,y2,0),
            circlePoint: new Point(x2 + this.holeR2-0.1,y2,0),
          })
        }

        if(this.checkedHole2 && this.checkedHole3) {
          this.crownCADPlugin.command.sketch.createCircle({
            centerPoint: new Point(x3,y3,0),
            circlePoint: new Point(x3 + this.holeR3-0.1,y3,0),
          })
        }


        if(this.checkedHole4 && this.checkedHole2 && this.checkedHole3) {
          this.crownCADPlugin.command.sketch.createCircle({
            centerPoint: new Point(x4,y4,0),
            circlePoint: new Point(x4 + this.holeR4-0.1,y4,0),
          })
        }


        if(this.checkedHole5 && this.checkedHole4 && this.checkedHole2 && this.checkedHole3) {
          this.crownCADPlugin.command.sketch.createCircle({
            centerPoint: new Point(x5,y5,0),
            circlePoint: new Point(x5 + this.holeR5-0.1,y5,0),
          })
        }

        if(this.checkedHole6 && this.checkedHole5 && this.checkedHole4 && this.checkedHole2 && this.checkedHole3) {
          this.crownCADPlugin.command.sketch.createCircle({
            centerPoint: new Point(x6,y6,0),
            circlePoint: new Point(x6 + this.holeR6-0.1,y6,0),
          })
        }

        //退出草图
        this.crownCADPlugin.command.sketch.exitSketch();
        await this.crownCADPlugin.command.execute();

        this.crownCADPlugin.command.clearCommand();

        //进行放样曲面
        let res3 = await this.crownCADPlugin.query.getElementsByFeatureNames(["草图13"]);

        let res4 = await this.crownCADPlugin.query.getElementsByFeatureNames(["草图14"]);

        this.crownCADPlugin.command.clearCommand();
        await this.crownCADPlugin.command.surface.loftSurfaceIncrement({
          profiles:  [res3.data.elements[0].id, res4.data.elements[0].id], hasGuideCurve:0, guideCurves:[]},"放样曲面1")
        await this.crownCADPlugin.command.execute();
        this.crownCADPlugin.command.clearCommand();
        if(this.checkedHole2) {
          await  this.crownCADPlugin.command.surface.loftSurfaceIncrement({
            profiles:  [res3.data.elements[1].id,res4.data.elements[1].id], hasGuideCurve:0, guideCurves:[]},"放样曲面2")
          await this.crownCADPlugin.command.execute();
          this.crownCADPlugin.command.clearCommand();
        }

        if(this.checkedHole2 && this.checkedHole3) {
          await this.crownCADPlugin.command.surface.loftSurfaceIncrement({
            profiles:  [res3.data.elements[2].id,res4.data.elements[2].id], hasGuideCurve:0, guideCurves:[]},"放样曲面3")
          await this.crownCADPlugin.command.execute();
          this.crownCADPlugin.command.clearCommand();
        }

        if(this.checkedHole2 && this.checkedHole3 && this.checkedHole4) {
          await this.crownCADPlugin.command.surface.loftSurfaceIncrement({
            profiles:  [res3.data.elements[3].id,res4.data.elements[3].id], hasGuideCurve:0, guideCurves:[]},"放样曲面4")
          await this.crownCADPlugin.command.execute();
          this.crownCADPlugin.command.clearCommand();
        }

        if(this.checkedHole2 && this.checkedHole3 && this.checkedHole4 && this.checkedHole5) {
          await this.crownCADPlugin.command.surface.loftSurfaceIncrement({
            profiles:  [res3.data.elements[4].id,res4.data.elements[4].id], hasGuideCurve:0, guideCurves:[]},"放样曲面5")
          await this.crownCADPlugin.command.execute();
          this.crownCADPlugin.command.clearCommand();
        }

        if(this.checkedHole2 && this.checkedHole3 && this.checkedHole4 && this.checkedHole5 && this.checkedHole6) {
          await this.crownCADPlugin.command.surface.loftSurfaceIncrement({
            profiles:  [res3.data.elements[5].id,res4.data.elements[5].id], hasGuideCurve:0, guideCurves:[]},"放样曲面6")
          await this.crownCADPlugin.command.execute();
          this.crownCADPlugin.command.clearCommand();
        }

        let res5 = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["放样曲面1"]);

        let res6, res7 , res8, res9, res10, res11
        if(this.checkedHole2) {
          res6 = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["放样曲面2"]);

        }
        if(this.checkedHole2 && this.checkedHole3) {
          res7 = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["放样曲面3"]);

        }
        if(this.checkedHole2 && this.checkedHole3&& this.checkedHole4) {
          res8 = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["放样曲面4"]);

        }
        if(this.checkedHole2 && this.checkedHole3&& this.checkedHole4&& this.checkedHole5) {
          res9 = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["放样曲面5"]);

        }
        if(this.checkedHole2 && this.checkedHole3&& this.checkedHole4&& this.checkedHole5 && this.checkedHole6) {
          res10 = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["放样曲面6"]);

        }
        // let res6 = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["放样曲面2"]);
        // 对放样的曲面进行加厚
        this.crownCADPlugin.command.clearCommand();
        await this.crownCADPlugin.command.solid.thickenIncrement({
          thickenSurfaceId: res5.data.entities[0].id, thickness: this.holeThickness, outward: 0, },"加厚11")
        await this.crownCADPlugin.command.execute();

        this.crownCADPlugin.command.clearCommand();
        if(this.checkedHole2) {
          await this.crownCADPlugin.command.solid.thickenIncrement({
            thickenSurfaceId: res6.data.entities[0].id, thickness: this.holeThickness, outward: 0, },"加厚12")
          await this.crownCADPlugin.command.execute();
        }

        this.crownCADPlugin.command.clearCommand();
        if(this.checkedHole2 && this.checkedHole3) {
          await this.crownCADPlugin.command.solid.thickenIncrement({
            thickenSurfaceId: res7.data.entities[0].id, thickness: this.holeThickness, outward: 0, },"加厚13")
          await this.crownCADPlugin.command.execute();
        }

        this.crownCADPlugin.command.clearCommand();
        if(this.checkedHole2 && this.checkedHole3 && this.checkedHole4) {
          await this.crownCADPlugin.command.solid.thickenIncrement({
            thickenSurfaceId: res8.data.entities[0].id, thickness: this.holeThickness, outward: 0, },"加厚14")
          await this.crownCADPlugin.command.execute();
        }

        this.crownCADPlugin.command.clearCommand();
        if(this.checkedHole2 && this.checkedHole3 && this.checkedHole4 && this.checkedHole5) {
          await this.crownCADPlugin.command.solid.thickenIncrement({
            thickenSurfaceId: res9.data.entities[0].id, thickness: this.holeThickness, outward: 0, },"加厚15")
          await this.crownCADPlugin.command.execute();
        }

        this.crownCADPlugin.command.clearCommand();
        if(this.checkedHole2 && this.checkedHole3 && this.checkedHole4 && this.checkedHole5 && this.checkedHole6) {
          await this.crownCADPlugin.command.solid.thickenIncrement({
            thickenSurfaceId: res10.data.entities[0].id, thickness: this.holeThickness, outward: 0, },"加厚16")
          await this.crownCADPlugin.command.execute();
        }


      },
      /////////////////////////////////////////////////////////////////////

      async convertEdge() {
        //创建草图，命名为sketch1
        this.crownCADPlugin.command.sketch.createSketch({sketchName: '草图2', datumId: 8});

        let edgeIds= []

        for (let i = 0; i < this.positionLines.length; i++) {
          edgeIds.push(this.positionLines[i].id)
        }

        this.crownCADPlugin.command.sketch.convertEdge({
          edgeIds: edgeIds, })
        //退出草图
        this.crownCADPlugin.command.sketch.exitSketch();
        //实现草图操作，参数true会覆盖之前的草图，不传则不会
        await this.crownCADPlugin.command.execute();

      },

      async trimCurveLine() {
        let res = await this.crownCADPlugin.query.getElementsByFeatureNames(["草图2"]);

        let sketchEls= []
        let trimLine= []
        let trimLine1= 0
        if(res.code=== 200) sketchEls= res.data.elements

        for (let i = 0; i < sketchEls.length; i++) {
          if (sketchEls[i].params.type=== 10) {
            trimLine.push(sketchEls[i])
          } else if (sketchEls[i].params.type=== 16){
            trimLine1= sketchEls[i]
          }
        }

        this.crownCADPlugin.command.clearCommand();
        //进入编辑操作
        this.crownCADPlugin.command.sketch.editSketch({sketchName: '草图2'});

        this.crownCADPlugin.command.sketch.createAutoTrimCurve({
          trimCurveId: trimLine1.id,
          trimCurvePoint: new Point(0,0,0),
        });


        let temp =null

        if( trimLine[0].params.startPoint[0]> trimLine[1].params.startPoint[0]) {
          temp= trimLine[0]
          this.firstPoint= trimLine[1]
          this.secondPoint= trimLine[0]
        } else {
          temp= trimLine[1]
          this.firstPoint= trimLine[0]
          this.secondPoint= trimLine[1]
        }



        this.crownCADPlugin.command.sketch.createAutoTrimCurve({
          trimCurveId: trimLine1.id,
          trimCurvePoint: new Point( trimLine1.params.startPoint[0],0,0),
        });


        //退出编辑
        this.crownCADPlugin.command.sketch.exitEditSketch({sketchName: '草图2'});
        await this.crownCADPlugin.command.execute();
        this.crownCADPlugin.command.clearCommand();

        let res1 = await this.crownCADPlugin.query.getElementsByFeatureNames(["草图2"]);

        let sketchEls1= []

        let tempEl= null

        if(res1.code=== 200) sketchEls1= res1.data.elements
        for (let i = 0; i < sketchEls1.length; i++) {
          if (sketchEls1[i].params.type === 16&& sketchEls1[i].params.startPoint[0]=== 100) {
            tempEl= sketchEls1[i]
          }
        }

        this.crownCADPlugin.command.clearCommand();
        //进入编辑操作
        this.crownCADPlugin.command.sketch.editSketch({sketchName: '草图2'});

        this.crownCADPlugin.command.sketch.createAutoTrimCurve({
          trimCurveId: tempEl.id,
          trimCurvePoint: new Point(temp.params.startPoint[0]+1,temp.params.startPoint[1]-0.02,0),
        });

        this.crownCADPlugin.command.sketch.exitEditSketch({sketchName: '草图2'});
        await this.crownCADPlugin.command.execute();
        this.crownCADPlugin.command.clearCommand();


      },

      async createExtrude() {
        this.crownCADPlugin.command.clearCommand();

        let res = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["草图2"]);

        await this.crownCADPlugin.command.solid.extrudeIncrement({
          sketch: res.data.entities[0].id,
          height1: this.ribThickness,
        }, "拉伸凸台");
        await this.crownCADPlugin.command.execute();
      },

      async createShell() {
        let hres = await this.crownCADPlugin.query.getEntitiesByFeatureNames(['拉伸凸台']);


        let hres1 = await this.crownCADPlugin.query.getElementsByEntityId(hres.data.entities[0].id);

        this.shellFaces= []
        let removeFaces= []
        let multiFaces= []
        hres1.data.elements.forEach(el=>{
          if(el.type===19) {
            this.shellFaces.push(el.id)
          }
        })
        removeFaces= [this.shellFaces[this.shellFaces.length-1]]
        multiFaces = this.shellFaces.slice(0, -1);
        this.crownCADPlugin.command.clearCommand();
        await this.crownCADPlugin.command.solid.createShellIncrement({
          removeFaces,
          thickness: this.webThickness1,
          multiFaces:multiFaces,
          multiThickness:[this.webThickness1,this.webThickness1,this.webThickness1,this.webThickness1,this.webThickness2 ],
          outward: 0},'抽壳')
        await this.crownCADPlugin.command.execute();
      },



      async createSlot() {
        this.crownCADPlugin.command.clearCommand();
        this.crownCADPlugin.command.sketch.createSketch({sketchName: '草图5', datumId: 8});

        let x1, x2, x3, x4, y1, y2, y3, y4
        x1= this.firstPoint.params.startPoint[0] + this.slotLength
        y1= this.firstPoint.params.startPoint[1] - this.slotWidth


        x2= this.firstPoint.params.endPoint[0] + this.slotLength
        y2= this.firstPoint.params.endPoint[1] + this.slotWidth



        x3= this.secondPoint.params.startPoint[0] - this.slotLength
        y3= this.secondPoint.params.startPoint[1] - this.slotWidth


        x4= this.secondPoint.params.endPoint[0] - this.slotLength
        y4= this.secondPoint.params.endPoint[1] + this.slotWidth


        this.crownCADPlugin.command.sketch.createRectangleByCenter({
          centerPoint: new Point(this.firstPoint.params.startPoint[0],this.firstPoint.params.startPoint[1],0), endPoint: new Point(x1,y1,0)
        })
        this.crownCADPlugin.command.sketch.createRectangleByCenter({
          centerPoint: new Point(this.firstPoint.params.endPoint[0],this.firstPoint.params.endPoint[1],0), endPoint: new Point(x2,y2,0)
        })

        this.crownCADPlugin.command.sketch.createRectangleByCenter({
          centerPoint: new Point(this.secondPoint.params.startPoint[0],this.secondPoint.params.startPoint[1],0), endPoint: new Point(x3,y3,0)
        })
        this.crownCADPlugin.command.sketch.createRectangleByCenter({
          centerPoint: new Point(this.secondPoint.params.endPoint[0],this.secondPoint.params.endPoint[1],0), endPoint: new Point(x4,y4,0)
        })

        this.crownCADPlugin.command.sketch.exitSketch();
        //实现草图操作，参数true会覆盖之前的草图，不传则不会
        await this.crownCADPlugin.command.execute();
        this.crownCADPlugin.command.clearCommand();

        let res = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["草图5"]);
        let ferRes = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["拉伸切除"]);

        await this.crownCADPlugin.command.solid.extrudeCutIncrement({
          sketch: res.data.entities[0]?.id,
          extrudeType:5,
          cutSolids: [ferRes.data.entities[0]?.id]
        }, "切除槽");
        await this.crownCADPlugin.command.execute();

      },

      addStringer() {
        this.stringers.push({
          stringerLength:5,
          stringerWidth:5,
        })
        this.addHeight(40)
      },

      removeStringer(index) {
        this.stringers.splice(index, 1);
        this.minusHeight(40)
      },
      addStringer2() {
        this.stringers2.push({
          stringerLength:5,
          stringerWidth:5,
        })
        this.addHeight(40)
      },

      removeStringer2(index) {
        this.stringers2.splice(index, 1);
        this.minusHeight(40)
      },

      async createStringerSlot(x, yy, sketchName, name) {
        this.crownCADPlugin.command.clearCommand();
        this.crownCADPlugin.command.sketch.createSketch({sketchName: sketchName, datumId: 8});

        let x1,y1
        x1= this.firstPoint.params.startPoint[0] + x
        y1= this.firstPoint.params.startPoint[1] - yy



        this.crownCADPlugin.command.sketch.createSketchLine({
          startPoint: new Point(x1-0.5,y1, 0),
          endPoint:new Point(x1-0.5,this.firstPoint.params.startPoint[1]+5, 0)
        })

        this.crownCADPlugin.command.sketch.createSketchLine({
          startPoint: new Point(x1+0.5,y1, 0),
          endPoint:new Point(x1+0.5,this.firstPoint.params.startPoint[1]+5, 0)
        })

        this.crownCADPlugin.command.sketch.createSketchLine({
          startPoint: new Point(x1+0.5,this.firstPoint.params.startPoint[1]+5, 0),
          endPoint:new Point(x1-0.5,this.firstPoint.params.startPoint[1]+5, 0)
        })
        this.crownCADPlugin.command.sketch.createArcByCenter({
          centerPoint: new Point(x1,y1,0),
          startPoint: new Point(x1-0.5,y1,0),
          endPoint: new Point(x1+0.5,y1,0),
        })

        // this.crownCADPlugin.command.sketch.createStraightSlot({
        //   startPoint: new Point(x1,y1,0), endPoint: new Point(x1,this.firstPoint.params.startPoint[1]+5,0), radiusPoint: new Point(x1,y1+2,0), })

        this.crownCADPlugin.command.sketch.exitSketch();
        //实现草图操作，参数true会覆盖之前的草图，不传则不会
        await this.crownCADPlugin.command.execute();

        await this.crownCADPlugin.command.execute();
        this.crownCADPlugin.command.clearCommand();

        let res = await this.crownCADPlugin.query.getEntitiesByFeatureNames([sketchName]);
        let ferRes = await this.crownCADPlugin.query.getEntitiesByFeatureNames([!name? "切除槽" : "桁条槽" + (name-1)]);
        await this.crownCADPlugin.command.solid.extrudeCutIncrement({
          sketch: res.data.entities[0]?.id,
          extrudeType:5,
          cutSolids: [ferRes.data.entities[0]?.id]
        }, "桁条槽" + name);
        await this.crownCADPlugin.command.execute();
      },

      async createStringerSlot2(x, yy, sketchName, name) {
        this.crownCADPlugin.command.clearCommand();
        this.crownCADPlugin.command.sketch.createSketch({sketchName: sketchName, datumId: 8});

        let x1,y1
        x1= this.firstPoint.params.endPoint[0] + x
        y1= this.firstPoint.params.endPoint[1] + yy



        this.crownCADPlugin.command.sketch.createSketchLine({
          startPoint: new Point(x1-0.5,y1, 0),
          endPoint:new Point(x1-0.5,this.firstPoint.params.endPoint[1]-5, 0)
        })

        this.crownCADPlugin.command.sketch.createSketchLine({
          startPoint: new Point(x1+0.5,y1, 0),
          endPoint:new Point(x1+0.5,this.firstPoint.params.endPoint[1]-5, 0)
        })

        this.crownCADPlugin.command.sketch.createSketchLine({
          startPoint: new Point(x1+0.5,this.firstPoint.params.endPoint[1]-5, 0),
          endPoint:new Point(x1-0.5,this.firstPoint.params.endPoint[1]-5, 0)
        })
        this.crownCADPlugin.command.sketch.createArcByThreePoint({
          firstPoint: new Point(x1-0.5,y1,0),
          secondPoint: new Point(x1+0.5,y1,0),
          thirdPoint: new Point(x1, y1+0.5,0),
        })

        // this.crownCADPlugin.command.sketch.createStraightSlot({
        //   startPoint: new Point(x1,y1,0), endPoint: new Point(x1,this.firstPoint.params.startPoint[1]+5,0), radiusPoint: new Point(x1,y1+2,0), })

        this.crownCADPlugin.command.sketch.exitSketch();
        //实现草图操作，参数true会覆盖之前的草图，不传则不会
        await this.crownCADPlugin.command.execute();

        await this.crownCADPlugin.command.execute();
        this.crownCADPlugin.command.clearCommand();

        let res = await this.crownCADPlugin.query.getEntitiesByFeatureNames([sketchName]);
        let ferRes = await this.crownCADPlugin.query.getEntitiesByFeatureNames(["桁条槽" + (name-1)]);
        await this.crownCADPlugin.command.solid.extrudeCutIncrement({
          sketch: res.data.entities[0]?.id,
          extrudeType:5,
          cutSolids: [ferRes.data.entities[0]?.id]
        }, "桁条槽" + name);
        await this.crownCADPlugin.command.execute();
      },

      removePositionLine(index) {
        this.positionLines.splice(index, 1);
        this.minusHeight(28)
      },
      removeCurvedSurface() {
        this.curvedSurface= null
        this.minusHeight(28)
      },
      removePositionLine1(index) {
        this.positionLines1.splice(index, 1);
        this.minusHeight(28)
      },

    }
  }
</script>

<style scoped>
  >>> .el-form-item {
    margin-bottom: 5px!important;
  }
  >>> .el-form-item__label {
    margin-bottom: 5px!important;
  }

  >>> .el-form-item__content {
    display: flex;
    align-items: center;
  }

  >>> .el-form-item {
    height: 32px!important;
  }
  >>> .el-form-item__label {
    line-height: 32px !important;
  }
  .selectItem {
    background-color: #d6eaff;
    color: #212529;
    border: 1px solid #6e7177;
    border-radius: .2rem;
    margin: .5rem .25rem;
    padding: .25rem .25rem .25rem .5rem;
    font-size: 12px;
    position: relative;
    cursor: pointer;
  }
  .color-bar {
    border-radius: 0 0 10px 0;
    height: 10px;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: .2s;
    transition: .2s;
    width: 10px;
  }
  .selectTitle {
    height: 24px;
    line-height: 24px;
  }
  .selectedItem {
    margin-left: 20px;
    padding: 5px 15px 5px 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
  }
  .selectedItem:hover {
    background-color: rgba(0,0,0,.1)/* 鼠标悬浮时的背景颜色 */
  }

</style>
